<template>
  <div class="TabModel HEADER-PAGE">
    <draggable class="HEADER-PAGE-DRAG" v-model="_pageList" @end="movePageSort" >
      <template #item="{element}">
        <div class="HEADER-PAGE-SPAN allTrans" v-if="!element.hidden" :class="[_currentPagePath === element.fullPath?'is-show':'']"
             @contextmenu.prevent="showPageTabMenu(element, $event)"
             v-on:click="$routeTab(element.fullPath, element.query)">
          <div class="HEADER-PAGE-SPAN-ICON" :class="element.icon" v-if="element.icon"></div>
          <div class="HEADER-PAGE-SPAN-TITLE overSpace">{{element.name}}</div>
          <div class="HEADER-PAGE-SPAN-CLOSE"
               v-on:click="$closePage(element.fullPath);$event.stopPropagation();">
            <i :class="element.fullVue && element.fullVue.pageChange?'warn iconfont icon-jinggao1':'el-icon-close'" class="allTrans"></i>
          </div>
        </div>
      </template>
    </draggable>
    <div class="HEADER-MENU" v-if="header.show" :style="{'top': header.top + 'px', 'left': header.left + 'px'}">
      <div class="HEADER-MENU-SPAN" v-on:click="$closePage(header.item.fullPath);header.show=false;">关闭</div>
      <div class="HEADER-MENU-SPAN" v-on:click="$closeOtherPage(header.item.fullPath);header.show=false;">关闭其他页面
      </div>
      <div class="HEADER-MENU-SPAN" v-on:click="$closeRightPage(header.item.fullPath);header.show=false;">关闭右侧页面
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery"
import {reactive} from 'vue';
import draggable from 'vuedraggable'
export default {
  mixins: [],
  components: {
    draggable
  },
  data() {
    return {
      header: {
        show: false,
        top: 0,
        left: 0,
        item: null
      },
    }
  },
  props: {},
  computed: {
    _pageList: function () {
      return this.$store.getters.getPagesList
    },
    _currentPagePath: function () {
      return this.$store.getters.getCurrentPagePath
    },
  },
  setup(props) {
    const model = reactive(props.modelValue || {});
    return {model}
  },
  mounted() {
    let self = this
    $(document).click(function () {
      self.header.show = false
    })
  },
  methods: {

    /**
     * 右键菜单
     * @param item
     * @param e
     */
    showPageTabMenu (item, e) {
      this.header.show = true
      this.header.left = e.pageX
      this.header.top = e.pageY
      this.header.item = item
    },

    /**
     * 调整页面顺序
     * @param e
     */
    movePageSort (e) {
      this.$store.commit('sortPageList', e)
    },
  },
  watch: {}
}
</script>
<style scoped lang="scss">
.TabModel {
  height: 100%;
  &.HEADER-PAGE {
    .HEADER-PAGE-DRAG{
      flex: 1;
      display: flex;
      .HEADER-PAGE-SPAN {
        display: flex;
        padding: 0 10px;
        line-height: 40px;
        font-size: 14px;
        max-width: 220px;
        flex: 1;
        cursor: pointer;
        position: relative;
        align-items: center;
        width: 0;

        &:hover {
          background: #fefefe;
        }

        &:first-child {
          &:after {
          }
        }

        &.is-show {
          border-bottom: 2px solid var(--primary);
          .HEADER-PAGE-SPAN-ICON,
          .HEADER-PAGE-SPAN-TITLE {
            color: var(--primary);
          }
          .HEADER-PAGE-SPAN-P{
            background: var(--primary);
            box-shadow: 0 0 12px 0px #a3a4ff;
          }
          .HEADER-PAGE-SPAN-CLOSE{
            i{
              background: var(--primary);
              width: 16px;
              height: 16px;
              line-height: 16px;
              font-size: 12px;
            }
          }
        }

        &.is-change {
          background: #fffaf5 !important;
        }

        &:after {
          content: '';
          width: 1px;
          height: 100%;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(0, -50%);
          background: var(--border-bc);
        }

        .HEADER-PAGE-SPAN-ICON {
          color: var(--font-hc);
          width: 16px;
          font-size: 16px;
        }

        .HEADER-PAGE-SPAN-P {
          width: 10px;
          height: 10px;
          margin-right: 5px;
          border-radius: 100px;
          background: var(--bg-page);
        }

        .HEADER-PAGE-SPAN-TITLE {
          margin: 0 5px;
          font-size: 14px;
          text-align: left;
          flex: 1;
          width: 0;
        }

        .HEADER-PAGE-SPAN-BADGE {
          position: relative !important;
          top: -1px;
          right: 0;
          height: 14px;
          width: 14px;
          line-height: 14px;
          -webkit-border-radius: 100px;
          -moz-border-radius: 100px;
          border-radius: 100px;
        }

        .HEADER-PAGE-SPAN-CLOSE {
          cursor: pointer;
          width: 20px;
          height: 100%;
          position: relative;
          i{
            width: 12px;
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            color: var(--bg-disabled);
            background: var(--bg-disabled);
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          &.warn {
            color: var(--danger);
          }

          &:hover {
            i{
              width: 16px;
              height: 16px;
              line-height: 16px;
              font-size: 12px;
              color: var(--font-hc);
            }
          }
        }
      }
    }
    .HEADER-MENU {
      background: #fff;
      border: 1px solid var(--border-bb);
      box-shadow: 3px 3px 20px 2px var(--panel-shadow);
      position: fixed;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      overflow: hidden;
      z-index: 11;

      .HEADER-MENU-SPAN {
        width: calc(100% - 40px);
        height: 30px;
        font-size: 12px;
        padding: 0 20px;
        line-height: 30px;
        cursor: pointer;

        &:hover {
          background: var(--primary);
          color: #fff;
        }
      }
    }
  }
}
</style>
